import 'package:elephant_fish/http/core/hi_error.dart';
import 'package:elephant_fish/model/beautiful_umber.dart';
import 'package:elephant_fish/util/size_util.dart';
import 'package:elephant_fish/widget/beautiful_number_card.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class IndexShopBeautifulPage extends StatefulWidget {
  const IndexShopBeautifulPage({Key key}) : super(key: key);

  @override
  _IndexShopBeautifulPageState createState() => _IndexShopBeautifulPageState();
}

class _IndexShopBeautifulPageState extends State<IndexShopBeautifulPage> {
  List<BeautifulNumber> beautifulList = [];
  int pageIndex = 1;
  bool _loading = false;
  ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      var dis = _scrollController.position.maxScrollExtent -
          _scrollController.position.pixels;
      //当距离底部不足300时加载更多
      if (dis < 300 && !_loading) {
        _loadData(loadMore: true);
      }
    });
    _loadData();
  }

  @override
  void dispose() {
    super.dispose();
    _scrollController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xff1b1b1b),
      body: Column(
        children: [
          SingleChildScrollView(
            child: Padding(
              padding:
                  EdgeInsets.only(left: SizeUtil.px(24), top: SizeUtil.px(21)),
              child: Row(
                children: [
                  Container(
                    width: SizeUtil.px(557),
                    height: SizeUtil.px(68),
                    decoration: BoxDecoration(
                        color: Color(0xff595959),
                        borderRadius:
                            BorderRadius.all(Radius.circular(SizeUtil.px(53)))),
                    child: Row(
                      children: [
                        Padding(
                          padding: EdgeInsets.only(left: SizeUtil.px(28)),
                          child: Icon(
                            Icons.search,
                            color: Color(0xffffffff),
                            size: SizeUtil.px(40),
                          ),
                        ),
                        SizedBox(
                          width: 5,
                        ),
                        Expanded(
                            child: TextField(
                          decoration: InputDecoration(
                            isCollapsed: true,
                            contentPadding: EdgeInsets.all(0),
                            border: InputBorder.none,
                            hintText: '输入心仪的账号',
                            hintStyle: TextStyle(
                                color: Color(0xffffffff),
                                fontSize: SizeUtil.px(33)),
                          ),
                          style: TextStyle(
                              color: Color(0xffffffff),
                              fontSize: SizeUtil.px(33)),
                        ))
                      ],
                    ),
                  ),
                  SizedBox(
                    width: SizeUtil.px(25),
                  ),
                  Container(
                      width: SizeUtil.px(121),
                      height: SizeUtil.px(55),
                      decoration: BoxDecoration(
                          color: Color(0xffff215d),
                          borderRadius: BorderRadius.all(
                              Radius.circular(SizeUtil.px(53)))),
                      child: Align(
                          alignment: Alignment.center,
                          child: Text(
                            '搜索',
                            style: TextStyle(
                                color: Color(0xfff3f3f3),
                                fontSize: SizeUtil.px(26)),
                          ))),
                ],
              ),
            ),
          ),
          Expanded(
            child: StaggeredGridView.countBuilder(
                shrinkWrap: true,
                controller: _scrollController,
                physics: const AlwaysScrollableScrollPhysics(),
                padding: EdgeInsets.only(left: 3, right: 3, top: 3),
                crossAxisCount: 4,
                crossAxisSpacing: 4,
                itemCount: beautifulList.length,
                itemBuilder: (BuildContext context, int index) {
                  //有banner时第一个item位置显示banner
                  return BeautifulNumberCard(
                      beautifulNumber: beautifulList[index]);
                },
                staggeredTileBuilder: (int index) {
                  return StaggeredTile.fit(2);
                }),
          ),
        ],
      ),
    );
  }

  void _loadData({loadMore = false}) async {
    _loading = true;
    if (!loadMore) {
      pageIndex = 1;
    }
    var currentIndex = pageIndex + (loadMore ? 1 : 0);
    print('loading:currentIndex:$currentIndex');
    try {
      // Video result =  await VideoDao.get(widget.categoryName,pageIndex: currentIndex, pageSize: 10);
      // setState(() {
      //   if (loadMore) {
      //     if (result.videoList.isNotEmpty) {
      //       //合成一个新数组
      //       videoList = [...videoList, ...result.videoList];
      //       pageIndex++;
      //     }
      //   } else {
      //     videoList = result.videoList;
      //   }
      // });
      // Future.delayed(Duration(milliseconds: 1000), () {
      //   _loading = false;
      // });
      for (int i = 0; i < 50; i++) {
        BeautifulNumber beautifulNumber =
            BeautifulNumber(1000, '123456789', '123456', false);
        beautifulList.add(beautifulNumber);
      }
      for (int i = 0; i < 5; i++) {
        BeautifulNumber beautifulNumber =
            BeautifulNumber(1000, '78789789798', '456789', true);
        beautifulList.add(beautifulNumber);
      }
    } on NeedAuth catch (e) {
      print(e);
    } on HiNetError catch (e) {
      print(e);
    }
  }

  @override
  bool get wantKeepAlive => true;
}
